<!DOCTYPE html>
<html class="car-loan">

	<head>
		<meta charset="UTF-8">
		<title>钱包盒子-汽车贷款</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.css" />
		<link rel="stylesheet" href="../css/public.css" />
		<link rel="stylesheet" href="../css/mui.picker.css" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/post-form.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">汽车贷款</h1>
		</header>
		<div class="mui-content">
			<ul class="input-group">
				<li class="input-row layout-center pt10 pb10">
					<label>借款金额</label>
					<div class="flex-item1">
						<input id="money" class="tr" type="tel" placeholder="请输入借款金额（元）" />
					</div>
				</li>
				<li class="input-row layout-center r-arrow mb10">
					<label>借款周期</label>
					<input type="hidden" name="cycle" id="cycleVal" value="24" />
					<div class="flex-item1">
						<span id="cycle" class="select-btn tr">请选择借款周期</span>
					</div>
				</li>
				<li class="input-row layout-center">
					<label>姓名</label>
					<div class="flex-item1">
						<input id="realName" class="tr" type="text" name="realName" placeholder="请输入借款人姓名" />
					</div>
				</li>
				<li class="input-row layout-center mb10">
					<label>手机号</label>
					<div id="phone" class="flex-item1 text"></div>
				</li>
				<li class="input-row layout-center r-arrow">
					<label>车型</label>
					<input type="hidden" name="cartype" id="cartype" value="" />
					<div class="flex-item1">
						<span id="carModel" class="select-btn tr">请选择车型</span>
					</div>
				</li>
			</ul>
		</div>

		<div class="car-foot">
			<div class="text"><img class="iconfont" src="../img/icon-security.png" />钱包盒子严格保护你的信息安全，未经你允许不会对外泄露</div>
			<div class="btn">
				<button id="sendBtn" class="mui-btn mui-btn-block send-btn" type="button">确认并提交</button>
			</div>
		</div>
	</body>
	<script src="../js/mui.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.picker.js"></script>
	<script src="../js/mui.poppicker.js"></script>
	<script>
		var type = 3;
		var phone;
		
		mui.init();

		mui.plusReady(function() {
			phone = common.getLocVal("mobile");
			document.getElementById("phone").innerHTML = phone;
		});
		
		var cyclePicker = new mui.PopPicker();
		cyclePicker.setData([{
			value: '1',
			text: '3个月'
		}, {
			value: '2',
			text: '6个月'
		}, {
			value: '3',
			text: '9个月'
		}, {
			value: '4',
			text: '12个月'
		}]);
		var cycleButton = document.getElementById('cycle');
		cycleButton.addEventListener('tap', function(event) {
			cyclePicker.show(function(items) {
				cycleButton.innerText = items[0].text;
				document.getElementById("cycleVal").value = items[0].text;
			});
		}, false);
		
		
		var carModelPicker = new mui.PopPicker();
		carModelPicker.setData([{
			value: '1',
			text: '豪华车'
		}, {
			value: '2',
			text: '小型车'
		}, {
			value: '3',
			text: 'SUV车'
		}, {
			value: '4',
			text: 'MPV车'
		}, {
			value: '5',
			text: '紧凑型车'
		}]);
		var carModelButton = document.getElementById('carModel');
		carModelButton.addEventListener('tap', function(event) {
			carModelPicker.show(function(items) {
				carModelButton.innerText = items[0].text;
				document.getElementById("cartype").value = items[0].text;
			});
		}, false);
		
		
		document.getElementById("sendBtn").addEventListener('tap', function() {
			var money = document.getElementById('money').value;
			if(!money) {
				common.alert("提示", "请输入借款金额!");
				return false;
			}
			var cycle = document.getElementById("cycleVal").value;
			if(!cycle) {
				common.alert("提示", "请选择贷款周期!");
				return false;
			}
			var real_name = document.getElementById("realName").value;
			if(!real_name) {
				common.alert("提示", "请输入您的真实姓名!");
				return false;
			}
			var cartype = document.getElementById("cartype").value;
			if(!cartype) {
				common.alert("提示", "请选择车型!");
				return false;
			}
			var params = {
				url: 'Borrow/save',
				data: {
					money: parseInt(money),
					real_name: real_name,
					cycle: cycle,
					phone: phone,
					cartype: cartype,
					type: parseInt(type)
				}
			}
			common.loading("正在提交...请稍后...");
			common.JsonPost(params, function(data) {
				common.closeLoading();
				common.alert("提示", "提交成功!");
				console.log(JSON.stringify(data));
			})
		});
	</script>

</html>